<template>
  <CommonPage
    :scroll-props="{ onPulldown }"
    title="我的任务"
    custom-class="my-mission"
  >
    <div class="my-mission__content">
      <div class="my-mission__content-jifen">
        <div class="label-wrapped">
          <div class="label">
            <image src="@/assets/my-mission/icon-corn.png" class="icon" />
            <span>已领取积分</span>
          </div>
          <span class="count">{{ points }}</span>
        </div>
        <image src="@/assets/my-mission/icon-box.png" class="box" />
      </div>

      <div class="my-mission__content-progress">
        <MissionCard title="进行中" :options="doingMissionList" />
      </div>

      <div v-if="achieveMissionList.length" class="my-mission__content-achieve">
        <MissionCard
          title="已完成"
          :disabled="true"
          :options="achieveMissionList"
        />
      </div>
    </div>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/common-page/with-navigateBar-page.vue";
import MissionCard from "./components/mission-card.vue";
import { apiQuerySelfMission } from "@/apis/knowledge";
import { useDidShow } from "@tarojs/taro";
import { ResponseCodeEnum } from "@/constants/index";
import { ref } from "vue";
import { ISelfMissionItem } from "@/apis/types/knowledge";
defineOptions({
  name: "my-mission",
});

const doingMissionList = ref<ISelfMissionItem[]>([]);
const achieveMissionList = ref<ISelfMissionItem[]>([]);
const points = ref(0);

useDidShow(() => {
  querySelfMissionServer();
});

const onPulldown = async (done: Function) => {
  try {
    await querySelfMissionServer();
  } catch (error) {
  } finally {
    done();
  }
};

const querySelfMissionServer = () => {
  apiQuerySelfMission().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      doingMissionList.value = data.doing || [];
      achieveMissionList.value = data.done || [];
      points.value = data.points || 0;
    }
  });
};
</script>

<style lang="less">
.my-mission {
  background-image: url("@/assets/my-mission/my-mission-bg.png");
  background-size: 100% 576px;
  background-repeat: no-repeat;
  background-color: #f5f5f5;
  &__content {
    padding-top: 24px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    &-jifen {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .box {
        width: 202px;
        height: 170px;
      }
      .label-wrapped {
        margin-left: 50px;
        display: flex;
        align-items: center;
        gap: 8px;
        .label {
          display: flex;
          align-items: center;
          gap: 4px;
          font-weight: 400;
          font-size: 24px;
          color: #000000;
          line-height: 32px;
          background: linear-gradient(
            90deg,
            #ffffff 0%,
            rgba(255, 255, 255, 0) 100%
          );
          border-radius: 18px 0 0 18px;
          padding: 2px 4px;
          .icon {
            width: 19px;
            height: 22px;
          }
        }
        .count {
          font-weight: 500;
          font-size: 56px;
          color: #000000;
          line-height: 80px;
        }
      }
    }
    &-progress {
      margin-top: 10px;
      width: 100%;
      box-shadow: 0 0 5px 0 #d8d8d8;
      border-radius: 20px;
    }
    &-achieve {
      margin-top: 30px;
    }
  }
}
</style>
